<template>
  <div class="student-add-main">
    <el-dialog
      title="提示"
      :visible.sync="dialog"
      width="65%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>必要信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input size="small" v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年龄">
                <el-input size="small" v-model="form.age"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="选择地市">
                <el-cascader
                  size="small"
                  :options="cityOptions"
                  v-model="selectCitys"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="电话">
                <el-input size="small" v-model="form.tel"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别">
                <el-select
                  size="small"
                  v-model="form.value"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.sex"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="班级">
                <el-select
                  size="small"
                  v-model="value"
                  placeholder="根据班级查询"
                >
                  <el-option
                    v-for="item in classList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.className"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="宿舍">
                <el-select
                  size="small"
                  v-model="value1"
                  placeholder="根据宿舍查询"
                >
                  <el-option
                    v-for="item in dormList"
                    :key="item.id"
                    :label="item.label"
                    :value1="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="入住日期" size="small">
                <el-date-picker
                  v-model="form.dormStartTime"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="离开日期" size="small">
                <el-date-picker
                  v-model="form.dormEndTime"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>补充信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="紧急联系人">
                <el-input size="small" v-model="form.tel2"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="微信">
                <el-input size="small" v-model="form.wx"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="qq">
                <el-input size="small" v-model="form.qq"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="毕业院校">
                <el-input size="small" v-model="form.school"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作">
                <el-input size="small" v-model="form.job"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 缴费信息表单 -->
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>缴费信息</span>
            <el-button type="primary" @click="show = !show" size="small">{{
              show ? "关闭缴费窗口" : "打开缴费窗口"
            }}</el-button>
          </div>

          <el-form
            v-show="show"
            :model="costForm"
            ref="form1"
            label-width="80px"
            :inline="false"
            size="normal"
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="类型">
                  <el-select v-model="costForm.costType" size="small">
                    <el-option label="学费" value="0"></el-option>
                    <el-option label="住宿费" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="金额">
                  <el-input-number
                    size="small"
                    v-model="costForm.costValue"
                    :min="0"
                  ></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="缴费时间">
                  <div class="block">
                    <el-date-picker
                      value-format="yyyy-MM-dd"
                      v-model="costForm.costTime"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="备注">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="costForm.costBak"
              ></el-input>
            </el-form-item>

            <div>
              <el-button size="small">取消</el-button>
              <el-button type="primary" size="small" @click="saveCostList"
                >暂存</el-button
              >
            </div>
          </el-form>

          <!-- 显示已经缴费的记录 -->

          <el-table :data="costList" border stripe>
            <el-table-column
              fixed
              label="序号"
              type="index"
              width="50"
            ></el-table-column>
            <el-table-column label="类型" width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.costType == 0 ? "学费" : "住宿费" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="costTime"
              label="时间"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="costValue"
              label="金额"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="costBak"
              label="备注"
              width="120"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="removeCostItem(scope.row.tempId)"
                  type="text"
                  size="small"
                  >删除</el-button
                >
                <!-- <el-button type="text" size="small" @click = "edit">编辑</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  studentAdd,
  costList,
  studentDetail,
  studentUpdate
} from "@/api/xs/student";
import { dormList } from "@/api/xs/dorm";
import {
  // provinceAndCityData,
  // regionData,
  // provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  // TextToCode,
} from "element-china-area-data";
export default {
  name: "xsStudentAdd",
  components: {},
  props: ["class-list"],
  data() {
    return {
      costList: [], //暂存缴费记录,整个列表
      costForm: {
        costType: "",
        costValue: "",
        costTime: "",
        costBak: ""
      }, // 那一行的数据
      dormList: [], //宿舍列表
      radio: "1",
      dialog: false, // 弹窗是否显示
      selectCitys: [], // 对应的model
      selectCityText: [], // 对应的省市区
      city:[], // 城市编号
      cityOptions:regionDataPlus,
      show: false,
      form: {
        // date: '',
        name: "",
        sex: "",
        age: "",
        province: "",
        city: "",
        address: "",
        tel: "",
        phone: "",
        wx: "",
        // radio:"1",
        qq: "",
        school: "", // 毕业院校
        job: "", // 工作后的公司
        dormStartTime: "", // 离开日期
        dormEndTime: "", // 入住日期
        dormId: "", // 宿舍id
        tel2: "", //备用电话，紧急联系人
        value: ""
      },
      options: [
        {
          value: "0",
          sex: "男"
        },
        {
          value: "1",
          sex: "女"
        }
      ],
      value: "",
      value1: ""
    };
  },
  methods: {
    openDialog(id) {
      // 控制组件开关，传入id，如果有id的话，就证明是更新，请求接口（studentDetail），先渲染那一条的数据
      this.dialog = true;
      if (id) {
        studentDetail({ id }).then(res => {
          console.log(res);
          this.form = res.data;
          // 不明白？？？
          var str = res.data.city;
          this.selectCitys = str.split(",");

          console.log(this.form);
          this.getcostList(id);
        });
      }
    },
    handleClose() {
      this.dialog = false;
    },
    close() {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.dialog = false;
        })
        .catch(_ => {});
    },
    handleChange(value) {
      if (value.length > 0) {
        // 城市编号value
        console.log(value);
        this.city.push(value);
        value.forEach(item => {
          this.selectCityText.push(CodeToText[item]);
        });
      }
      // 三级城市选择（省市区）
      console.log(this.selectCityText); 
    },
    // 请求宿舍列表信息
    getDormList() {
      dormList({
        start: 1,
        limit: 10
      }).then(res => {
        console.log(res);
        this.dormList = res.data.list;
        console.log(this.dormList);
      });
    },

    // 缴费信息，数组为空，接口问题
    getcostList(id) {
      costList({
        userId: id
      }).then(res => {
        console.log(res);
      });
    },
    //学费暂存
    saveCostList() {
      var newCostForm = {};
      for (var item in this.costForm) {
        newCostForm[item] = this.costForm[item];
      }
      // 构建了一个临时的id,用于删除添加到缴费列表中的每一项
      newCostForm.tempId = new Date().getTime();
      this.costList.push(newCostForm);
      this.costForm = {};
    },
    // 学费删除
    removeCostItem(tempId) {
      // console.log(this.costList);
      // this.costList = this.costList.filter(item => {
      //   item.tempId !== tempId;
      // })
      var index = -1;
      for (var i = 0; i < this.costList.length; i++) {
        if (this.costList[i].tempId == tempId) {
          index = i;
          break;
        }
      }
      if (index > 0) {
        this.costList.splice(index, 1);
      }
    },

    save() {
      var params = {
        xyUser: {
          name: this.form.name,
          age: this.form.age,
          sex: this.form.value,
          //   manID: "",
          tel: this.form.tel,
          city: this.city.join(','),
          selectCityText: this.selectCityText.join(","),
          school: this.form.school,
          job: this.form.job,
          address: this.form.address,
          id: this.form.id
        }
      };
      if (this.form.id) {
        studentUpdate(params).then(res => {
          console.log(res);
          // 提示：
          this.$message.success("编辑完成！");
          this.dialog = false;
          this.$emit("refrush");
          this.form = "";
          this.selectCitys = [];
          return;
        });
      } else {
        var paramss = {
          xyUser: {
            name: this.form.name,
            age: this.form.age,
            sex: this.form.value,
            //   manID: "",
            tel: this.form.tel,
            city: this.city.join(','),
            cityText: this.selectCityText.join(","),
            school: this.form.school,
            job: this.form.job,
            address: this.form.address
            // id:this.form.id,
          }
        };
        studentAdd(paramss).then(res => {
          console.log(res);
          // 提示：
          this.$message.success("新增完成");
          this.selectCitys = [];
          this.dialog = false;
          this.$emit("refrush");
        });
      }
    },
    created() {
      this.getDormList();
      this.getcostList();
    }
  }
};
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 20px;
}
// .el-row{
//     width:300px;
// }
.el-input {
  width: 190px;
}
// .el-table{
//     margin-top:20px;
// }
</style>
